<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的订单</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<style type="text/css">
.active {
	background-color: blue;
}
</style>
<script type="text/javascript">
	$(function(){
		$("#header").load("/zlz/header.html");
	})
</script>
</head>
<body>
	<div id="header" >
	</div>
	<div id="all" class="container">
		<div v-if="orders!=null">
				<table class="table table-striped table-hover text-center">
				<thead>
					<tr>
						<th>序号</th>
						<th>昵称</th>
						<th>流派</th>
						<th>课程名称</th>
						<th>上课时间</th>
						<th>时长</th>
						<th>下单时间</th>
						<th>应付</th>
						<th>实付</th>
						<th>订单状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(order,index) in orders" :key="index">
						<td>{{index+1}}</td>
						<td>{{order.nickName}}</td>
						<td>{{order.styleName}}</td>
						<td>{{order.courseName}}</td>
						<td>{{order.courseTime}}</td>
						<td>{{order.courseHour}}</td>
						<td>{{order.orderTime}}</td>
						<td>{{order.payable}}</td>
						<td>{{order.payed}}</td>
						<td>
							<b v-if="order.orderStatus==1" class="text-warning">约课申请中</b>
							<b v-if="order.orderStatus==2" class="text-primary">还未付款</b>
							<b v-if="order.orderStatus==3" class="text-success">付款成功</b>
							<b v-if="order.orderStatus==4" class="text-danger">申请被拒绝</b>
							<b v-if="order.orderStatus==5" class="text-info">已完成</b>
							<b v-if="order.orderStatus==6" class="text-warning">待教练同意</b>
						</td>
						<td >
							<button	class="btn btn-outline-primary" v-if="order.orderStatus==1&&role=='coach'&&order.readed" @click="remindAccept(order)"  >{{order.remindAccept}}</button>
							
							<button	class="btn btn-outline-info" v-else-if="order.orderStatus==2&&role=='coach'&&order.readed" @click="remindPay(order)" >{{order.remindPay}}</button>
							<button	class="btn btn-outline-warning" v-else-if="order.orderStatus==3&&order.readed&&role=='student'" @click="remark(order.id)"  >去评价</button>
							<button	class="btn btn-outline-primary" v-else-if="order.orderStatus==2&&order.readed&&role=='student'" @click="pay(order)"  >{{order.pay}}</button>								
							<button	class="btn btn-outline-success"  v-else-if="order.orderStatus==1&&order.readed&&role=='student'" @click="accept(order)" >{{order.accept}}</button>
							<button	class="btn btn-outline-danger" v-if="order.orderStatus==1&&order.readed&&role=='student'" @click="refuse(order)"  >{{order.refuse}}</button>
							<button	class="btn btn-outline-success"  v-else-if="order.orderStatus==6&&order.readed&&role=='coach'" @click="accept(order)" >{{order.accept}}</button>
							<button	class="btn btn-outline-danger" v-if="order.orderStatus==6&&order.readed&&role=='coach'" @click="refuse(order)"  >{{order.refuse}}</button>												
							<button class="btn btn-outline-info"  v-else-if="!order.readed" disabled>{{order.opr}}</button>
						<td>



						</tr>
				</tbody>
			</table>
			
			<div class="row">
				<div class="offset-md-5">
					<ul class="pagination">
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="prePage"> <</a></li>
						<li class="page-item" v-for="(item, index) in pageNum"><a
							class="page-link" href="#" v-on:click.prevent="getOrders(item)"
							:class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
						<li class="page-item"><a class="page-link" href="#"
							v-on:click.prevent="nextPage">></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div v-else class="row">
			<p class="offset-md-5">您还没有订单</p>
		</div>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#all",
		data:{
			orders:[],
			role:"",
			pageNum:0,
			currentPage:0,
			active:""
		},
		mounted(){
			this.getOrders(1);
			axios.get("/user/hasrole").then(
					res => {
						this.role = res.data;
						console.log(res.data);
					})
		},
		methods:{
			
			getOrders:function(page){
				axios.get("/order/getOrders?page="+page)
				.then(
					res => {
						
						this.currentPage = res.data.data.nowPage;
						this.pageNum = res.data.data.totalPage;
						if(res.data.code==2){
							var orders=res.data.data.list;	
							
							if(orders!=null){
								orders.forEach(el => {
											
										el.readed=true;
										el.remindAccept = "提醒ta接受";
										el.remindPay = "提醒ta支付";
										el.opr="";
										el.accept = "接受";
										el.refuse = "拒绝";
								})
								this.orders = orders;
							}
							
							
						}else if(res.data.code==1){
							var orders=res.data.data.list;			
							if(orders!=null){
								orders.forEach(el => {
										
										el.readed=true;
										el.accept = "接受";
										el.refuse = "拒绝";
										el.pay = "支付";
										el.opr="";
								})
								this.orders = orders;
							}
							
						}else{
							layer.alert("服务器忙，请稍后再试");
						}
					}
				
				)
			},

			remark:function(id){
				location.href="/zlz/remark.html?id="+id;
			},
			pay:function(order){
				axios.get("/order/pay?oid="+order.id).then(res=>{
					if(res.data.code==1){
						layer.msg("支付成功");
						this.getOrders(this.currentPage);
						
					}else if(res.data.code==3){						
						layer.confirm("您的余额不足，是否前往充值?", {btn:["确认","取消"],btn1:function(){
							location.href="/zlz/mywallet.html";
							}
						});
					}else if(res.data.code==4){
						layer.msg("该订单已经被支付了");
						this.getOrders(this.currentPage);
					}else{
						layer.msg("系统维护中，请稍后");
					}
					
				})
				
			},

			accept:function(order){
				
				axios.get("/order/acceptOrder?oid="+order.id).then(res=>{
					if(res.data.code==3){
						layer.msg("该申请已被处理");
						this.getOrders(this.currentPage);
					}else if(res.data.code==1){
						order.readed =false;
						order.opr = "已接受";						
						layer.msg("已接受");
					}else{
						layer.msg("系统维护中，请稍后");
					}
				})
			},


			refuse:function(order){
				
				axios.get("/order/refuseOrder?oid="+order.id).then(res=>{
					if(res.data.code==3){
					layer.msg("该申请已被处理");
					this.getOrders(this.currentPage);
					}else if(res.data.code==1){
						layer.msg("已拒绝");
						order.opr = "已拒绝";
						order.readed =false;
					}else{
						layer.msg("系统维护中，请稍后");
					}
				})
			},

				

			
			remindAccept:function(order){
				var params =new URLSearchParams;
				params.append("userIdSender",order.userIdCoach);
				params.append("userIdAccepter",order.userIdStudent);
				params.append("content",order.studentNickName+"，秋梨膏，一起上课吧，点击接受我马上上门服务！");
				params.append("messageStatus","2");
				params.append("orderId",order.id);
				axios({
					url:"/coach/remind",
					method:"post",
					data:params
				}).then(
					res => {
						if(res.data.code==200){
							//修改该button的样式并禁用
							order.opr="已提醒接受";
							order.readed=true;
							layer.msg("已提醒成功");
							
							
						}else{
							layer.msg("系统维护中，请稍后");
						}
					}
				)
			},
			remindPay:function(order){
				var params =new URLSearchParams;
				params.append("userIdSender",order.userIdCoach);
				params.append("userIdAccepter",order.userIdStudent);
				params.append("content",order.studentNickName+"，秋梨膏，结下账吧！"+"还记得吗？我们在:"+order.courseTime+"上了一节:"+order.styleName+"-"+order.courseName+"~");
				params.append("messageStatus","2");
				params.append("orderId",order.id);	
				axios({
					url:"/coach/remind",
					method:"post",
					data:params
				}).then(
					res => {
						if(res.data.code==200){
							//修改该button的样式并禁用
							order.readed=true;						
							layer.msg("已提醒成功");
							order.opr = "已提醒支付";		
						}else{
							layer.msg("系统维护中，请稍后");
						}
					}
				
				)
			},
			
			prePage:function(){
				if(this.currentPage>1){
					this.getOrders(this.currentPage-1);
				}
			},
			nextPage:function(){
				if(this.currentPage<this.pageNum){
					this.getOrders(this.currentPage+1);
				}
			},
			
		
		}
	})
</script>
</html>